<template>
	<view>
		<video class="video" :src="MVdata.url" autoplay show-fullscreen-btn show-center-play-btn></video>
		<commont :total="commitData.total" :reviewCommonts="comments" @scrolltolower="scrolltolower"></commont>
	</view>
</template>

<script setup>
	import { onLoad } from '@dcloudio/uni-app'
	import { getMVUrlAPI,getMvCommitAPI } from '@/common/api/audioBlogsAPI.js'
import { ref,computed, reactive } from "vue";
import commont from './commont/commont.vue'
	
	
	const MVdata = ref({})
	// 获取mv
	const getMVUrl = async (params) => {
		const res = await getMVUrlAPI(params)
		if(res.code !== 200) return uni.showToast({
			title:'获取MV失败',
			duration:2000,
			icon:'error'
		})
		MVdata.value = res.data
	}
	const commitData = ref({})
	const comments = ref([])
	
	// 获取评论
	const getMvCommit = async (params) => {
		const res = await getMvCommitAPI(params)
		if(res.code !== 200) return uni.showToast({
			title:'获取评论失败',
			duration:2000,
			icon:'error'
		})
		commitData.value = res
		comments.value.push(...res.comments)
	}
	
	const id = ref(null)
	
	const commentInfo = reactive({
		limit:20,
		offset:0
	})
	
	const scrolltolower = () => {
		commentInfo.offset += commentInfo.limit
		getMvCommit({...commentInfo,id:id.value})
	}
	
	onLoad((options)=>{	
		id.value = options.id
		getMVUrl({id:options.id})
		getMvCommit({...commentInfo,id:options.id})
	})
</script>

<style lang="scss">
.video{
	width: 100%;
}
</style>
